<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设计小帮手</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        body {
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
            background-color: #f5f5f5;
            color: #333;
            line-height: 1.6;
        }
        .container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
        }
        h1 {
            color: #2c3e50;
            margin-bottom: 20px;
            text-align: center;
            font-size: 1.8rem;
        }
        .upload-area {
            background-color: #fff;
            border: 2px dashed #3498db;
            border-radius: 5px;
            padding: 40px 20px;
            text-align: center;
            margin-bottom: 20px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .upload-area:hover {
            border-color: #2980b9;
            background-color: #f8f9fa;
        }
        .btn {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 10px 20px;
            font-size: 16px;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }
        .btn:hover {
            background-color: #2980b9;
        }
        .btn:disabled {
            background-color: #ccc;
            cursor: not-allowed;
        }
        .process-btn {
            background-color: #2ecc71;
        }
        .process-btn:hover {
            background-color: #27ae60;
        }
        .download-btn {
            background-color: #e67e22;
        }
        .download-btn:hover {
            background-color: #d35400;
        }
        .loading {
            display: none;
            text-align: center;
            margin: 20px 0;
            font-style: italic;
            color: #7f8c8d;
        }
        .error {
            display: none;
            color: #e74c3c;
            text-align: center;
            margin: 20px 0;
            font-weight: bold;
        }
        .success {
            display: none;
            color: #2ecc71;
            text-align: center;
            margin: 20px 0;
            font-weight: bold;
        }
        .file-type-selector {
            display: none; /* 隐藏但保留类，防止JS依赖它 */
        }
        .review-upload-section {
            margin-bottom: 10px;
        }
        .model-select {
            padding: 10px 20px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        /* 导航栏样式 */
        nav {
            background-color: #2980b9;
            padding: 12px 0;
            margin-bottom: 20px;
            border-radius: 5px;
            box-shadow: 0 3px 6px rgba(0,0,0,0.1);
            position: relative;
        }
        .nav-logo {
            font-size: 20px;
            font-weight: bold;
            margin-right: 15px;
            color: white;
            display: flex;
            align-items: center;
            text-shadow: 0 1px 2px rgba(0,0,0,0.2);
        }
        nav ul {
            display: flex;
            justify-content: center;
            list-style: none;
            align-items: center;
            margin: 0;
            padding: 0;
        }
        nav ul li {
            margin: 0 15px;
        }
        /* 导航栏中的单选框样式 */
        nav ul li label {
            color: white;
            cursor: pointer;
            font-weight: bold;
            padding: 0;
            border-radius: 4px;
            transition: all 0.3s;
            display: inline-block;
            font-size: 16px;
        }
        nav ul li input[type="radio"] {
            display: none;
        }
        nav ul li input[type="radio"] + span {
            padding: 10px 15px;
            border-radius: 4px;
            transition: all 0.3s;
            display: inline-block;
        }
        nav ul li input[type="radio"]:checked + span {
            background-color: rgba(255, 255, 255, 0.3);
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            transform: translateY(-1px);
        }
        nav ul li label:hover span {
            background-color: rgba(255, 255, 255, 0.2);
        }
        /* 新增：两列上传区域布局 */
        .two-column-upload {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
        }
        .upload-column {
            flex: 1;
            background-color: #fff;
            border: 2px dashed #3498db;
            border-radius: 5px;
            padding: 20px;
            text-align: center;
            margin: 0 10px;
            transition: all 0.3s ease;
        }
        .upload-column:hover {
            border-color: #2980b9;
            background-color: #f8f9fa;
        }
        /* 新增：进度条样式 */
        .progress-container {
            width: 100%;
            margin: 20px 0;
            display: none;
        }
        .progress-bar {
            height: 20px;
            background-color: #3498db;
            width: 0%;
            border-radius: 10px;
            transition: width 0.3s ease;
        }
        .progress-text {
            text-align: center;
            margin-top: 5px;
            font-size: 14px;
            color: #7f8c8d;
        }
        /* 新增：日志显示区域样式 */
        .log-container {
            margin-top: 15px;
            width: 100%;
            border: 1px solid #ddd;
            border-radius: 5px;
            background-color: #f8f9fa;
        }
        
        .log-header {
            padding: 5px 10px;
            background-color: #3498db;
            color: white;
            font-weight: bold;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
        }
        
        .log-area {
            height: 200px;
            overflow-y: auto;
            padding: 10px;
            font-family: monospace;
            font-size: 13px;
            white-space: pre-wrap;
            word-wrap: break-word;
            background-color: #f8f9fa;
            color: #333;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
        }
        
        /* 添加日志级别颜色 */
        .log-info {
            color: #2980b9;
        }
        
        .log-warn {
            color: #f39c12;
        }
        
        .log-error {
            color: #e74c3c;
        }
        
        .log-success {
            color: #27ae60;
        }
        /* 响应式导航栏 */
        @media (max-width: 768px) {
            .container {
                padding: 10px;
            }
            h1 {
                font-size: 1.5rem;
            }
            nav ul {
                flex-direction: column;
                align-items: center;
            }
            nav ul li {
                margin: 8px 0;
            }
            nav ul li input[type="radio"] + span {
                padding: 8px 12px;
                min-width: 150px;
                text-align: center;
            }
            .two-column-upload {
                flex-direction: column;
            }
            .upload-column {
                margin: 10px 0;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>设计小帮手</h1>
        
        <!-- 导航菜单 -->
        <nav>
            <ul>
                <li>
                    <label>
                        <input type="radio" name="fileType" value="word" checked>
                        <span>Word文档处理</span>
                    </label>
                </li>
                <li>
                    <label>
                        <input type="radio" name="fileType" value="excel">
                        <span>Excel生成Prompt</span>
                    </label>
                </li>
                <li>
                    <label>
                        <input type="radio" name="fileType" value="review">
                        <span>文档审核检查</span>
                    </label>
                </li>
            </ul>
        </nav>
        <!-- 功能说明区域 -->
        <div id="featureDescription" class="feature-description" style="margin: 20px 0; padding: 15px; background-color: #f8f9fa; border-radius: 5px; border-left: 4px solid #3498db;">
            <p id="featureText" style="margin: 0; color: #444;"></p>
        </div>
        <!-- 普通上传区域（Word和Excel处理模式使用） -->
        <div id="uploadArea" class="upload-area">
            <p id="uploadText">拖拽文件到这里或点击选择文件</p>
            <input type="file" id="fileInput" accept=".docx,.xlsx" style="display: none">
            <button class="btn" onclick="document.getElementById('fileInput').click()">选择文件</button>
            <!-- 添加Excel模板下载按钮（仅在Excel模式下显示） -->
            <div id="templateDownloadBtn" style="display: none; margin-top: 15px;">
                <a href="/download-audit-template" class="btn download-btn" style="text-decoration: none;">下载Excel模板</a>
            </div>
        </div>
        
        
        
        <!-- 新增：文档审核检查的双栏上传UI -->
        <div id="twoColumnUpload" class="two-column-upload" style="display: none;">
            <div class="upload-column">
                <p>Word文档</p>
                <p id="wordFileName">未选择</p>
                <input type="file" id="wordFileInput" accept=".docx" style="display: none">
                <button id="uploadWordBtn" class="btn" onclick="document.getElementById('wordFileInput').click()">上传Word文档</button>
            </div>
            <div class="upload-column">
                <p>Excel文档</p>
                <p id="excelFileName">未选择</p>
                <input type="file" id="excelFileInput" accept=".xlsx" style="display: none">
                <button id="uploadExcelBtn" class="btn" onclick="document.getElementById('excelFileInput').click()">上传Excel文档</button>
                <!-- 添加带Prompt的Excel模板下载按钮 -->
                <div style="margin-top: 10px;">
                    <a href="/download-audit-template-with-prompt" class="btn download-btn" style="text-decoration: none;">下载Excel模板</a>
                </div>
            </div>
        </div>
        
        <!-- 进度条 -->
        <div id="progressContainer" class="progress-container">
            <div id="progressBar" class="progress-bar"></div>
            <div id="progressText" class="progress-text">已完成: 0%</div>
            
            <!-- 日志显示区域 -->
            <div id="logContainer" class="log-container">
                <div class="log-header">审核任务实时日志</div>
                <pre id="logArea" class="log-area">等待日志信息...</pre>
            </div>
        </div>

        <!-- 原来的单独上传区域（已隐藏，保留代码以防需要） -->
        <div id="reviewUploadArea" style="display: none; margin: 20px 0;">
            <!-- 此部分内容被新的两列布局替代 -->
        </div>

        <!-- 模型选择器 -->
        <div id="modelSelector" style="display: none; margin: 20px 0;">
            <p>选择模型类型:</p>
            <select id="modelType" class="model-select">
                <option value="DeepSeek-R1-671B_20250302">大模型类型：建行方舟满血版R1（高质量）</option>
                <option value="DeepSeek-R1-QW32B_SFT_0228_V1">大模型类型：建行方舟蒸馏版（高响应）</option>
                <option value="deepseek-reasoner">大模型类型：公网Deepseek R1</option>
            </select>
        </div>

        <div id="loading" class="loading">正在处理中...</div>
        <div id="error" class="error"></div>
        <div id="success" class="success"></div>
        <div class="actions">
            <button id="process-excel-btn" class="btn process-btn">生成Prompt</button>
            <button id="process-review-btn" class="btn process-btn" style="display: none;">开始审核检查</button>
            <button id="download-word-btn" class="btn download-btn">下载Markdown文件</button>
            <button id="download-excel-btn" class="btn download-btn">下载Excel文件</button>
        </div>
        <div id="preview"></div>
    </div>

    <script>
        const uploadArea = document.getElementById('uploadArea');
        const uploadText = document.getElementById('uploadText');
        const fileInput = document.getElementById('fileInput');
        const loading = document.getElementById('loading');
        const error = document.getElementById('error');
        const success = document.getElementById('success');
        const preview = document.getElementById('preview');
        const downloadWordBtn = document.getElementById('download-word-btn');
        const downloadExcelBtn = document.getElementById('download-excel-btn');
        const processExcelBtn = document.getElementById('process-excel-btn');
        const processReviewBtn = document.getElementById('process-review-btn');
        const fileTypeRadios = document.getElementsByName('fileType');
        const reviewUploadArea = document.getElementById('reviewUploadArea');
        const twoColumnUpload = document.getElementById('twoColumnUpload');
        const uploadWordBtn = document.getElementById('uploadWordBtn');
        const uploadExcelBtn = document.getElementById('uploadExcelBtn');
        const modelSelector = document.getElementById('modelSelector');
        const modelTypeSelect = document.getElementById('modelType');
        const progressContainer = document.getElementById('progressContainer');
        const progressBar = document.getElementById('progressBar');
        const progressText = document.getElementById('progressText');
        const featureDescription = document.getElementById('featureDescription');
        const featureText = document.getElementById('featureText');
        
        // 功能描述文本
        const featureDescriptions = {
            'word': '将设计文档转化为md格式，便于拷贝给方舟助手进行提问。',
            'excel': '将审核要点转化为高质量的结构化提示词，便于大模型审核。生成后增加了Prompt列，文件可直接用于【文档审核检查】功能。审核要点文档可以下载模板了解格式要求！',
            'review': '上传设计文档和带Prompt列的审核要点文档，选择适合的大模型进行检核。过程需要您耐心等待，最终检核结果会生成到结果文件中，供您下载查阅。'
        };
        
        let downloadUrl = '';
        let currentFileType = 'word';
        let currentFileName = '';
        let tempFilePath = '';
        let uploadedFiles = {
            word: null,
            excel: null
        };
        let currentTaskId = null;
        let progressInterval = null;

        // 切换文件类型处理模式
        fileTypeRadios.forEach(radio => {
            radio.addEventListener('change', (e) => {
                currentFileType = e.target.value;
                resetUI();
                updateAcceptedFileTypes();
                updateFeatureDescription();
            });
        });

        function updateFeatureDescription() {
            // 更新功能描述文本
            featureText.textContent = featureDescriptions[currentFileType] || '';
        }

        function updateAcceptedFileTypes() {
            if (currentFileType === 'word') {
                fileInput.accept = '.docx';
                uploadText.textContent = '拖拽Word文件到这里或点击选择文件';
                uploadArea.style.display = 'block';
                twoColumnUpload.style.display = 'none';
                modelSelector.style.display = 'none';
                // 隐藏Excel模板下载按钮
                document.getElementById('templateDownloadBtn').style.display = 'none';
            } else if (currentFileType === 'excel') {
                fileInput.accept = '.xlsx';
                uploadText.textContent = '拖拽Excel文件到这里或点击选择文件';
                uploadArea.style.display = 'block';
                twoColumnUpload.style.display = 'none';
                modelSelector.style.display = 'none';
                // 显示Excel模板下载按钮
                document.getElementById('templateDownloadBtn').style.display = 'block';
            } else if (currentFileType === 'review') {
                // 在审核模式下，显示双栏上传，隐藏普通上传区域
                uploadArea.style.display = 'none';
                twoColumnUpload.style.display = 'flex';
                modelSelector.style.display = 'block';
                processReviewBtn.style.display = 'none'; // 初始设为隐藏，仅当两个文件都上传后才显示
            }
        }

        function resetUI() {
            loading.style.display = 'none';
            error.style.display = 'none';
            success.style.display = 'none';
            preview.innerHTML = '';
            downloadWordBtn.style.display = 'none';
            downloadExcelBtn.style.display = 'none';
            processExcelBtn.style.display = 'none';
            processReviewBtn.style.display = 'none';
            progressContainer.style.display = 'none';
            modelSelector.style.display = 'none';
            document.getElementById('wordFileName').textContent = '未选择';
            document.getElementById('excelFileName').textContent = '未选择';
            
            // 重置日志区域
            const logArea = document.getElementById('logArea');
            if (logArea) {
                logArea.innerHTML = '等待日志信息...';
            }
            
            downloadUrl = '';
            currentFileName = '';
            tempFilePath = '';
            uploadedFiles.word = null;
            uploadedFiles.excel = null;
            
            // 停止任务进度轮询
            if (progressInterval) {
                clearInterval(progressInterval);
                progressInterval = null;
            }
        }

        // 初始化：确保一开始就隐藏所有按钮
        function initializeUI() {
            // 隐藏所有操作按钮
            downloadWordBtn.style.display = 'none';
            downloadExcelBtn.style.display = 'none';
            processExcelBtn.style.display = 'none';
            processReviewBtn.style.display = 'none';
            
            // 设置初始功能描述
            updateFeatureDescription();
            
            // 确保UI元素状态正确
            updateAcceptedFileTypes();
        }
        
        // 拖拽事件处理
        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
            uploadArea.addEventListener(eventName, preventDefaults, false);
            document.body.addEventListener(eventName, preventDefaults, false);
        });

        function preventDefaults(e) {
            e.preventDefault();
            e.stopPropagation();
        }

        ['dragenter', 'dragover'].forEach(eventName => {
            uploadArea.addEventListener(eventName, highlight, false);
        });

        ['dragleave', 'drop'].forEach(eventName => {
            uploadArea.addEventListener(eventName, unhighlight, false);
        });

        function highlight(e) {
            uploadArea.classList.add('dragover');
        }

        function unhighlight(e) {
            uploadArea.classList.remove('dragover');
        }

        uploadArea.addEventListener('drop', handleDrop, false);
        fileInput.addEventListener('change', handleFiles, false);
        downloadWordBtn.addEventListener('click', handleDownloadWord, false);
        downloadExcelBtn.addEventListener('click', handleDownloadExcel, false);
        processExcelBtn.addEventListener('click', handleProcessExcel, false);
        processReviewBtn.addEventListener('click', handleProcessReview, false);
        
        // 文档审核上传处理
        document.getElementById('wordFileInput').addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (!file) return;
            
            uploadedFiles.word = file;
            document.getElementById('wordFileName').textContent = file.name;
            
            // 如果两个文件都已上传，启用处理按钮
            if (uploadedFiles.word && uploadedFiles.excel) {
                processReviewBtn.style.display = 'block';
            }
        });
        
        document.getElementById('excelFileInput').addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (!file) return;
            
            uploadedFiles.excel = file;
            document.getElementById('excelFileName').textContent = file.name;
            
            // 如果两个文件都已上传，启用处理按钮
            if (uploadedFiles.word && uploadedFiles.excel) {
                processReviewBtn.style.display = 'block';
            }
        });

        function handleDrop(e) {
            const dt = e.dataTransfer;
            const files = dt.files;
            handleFiles({ target: { files: files } });
        }

        function handleFiles(e) {
            const file = e.target.files[0];
            if (!file) return;

            if (currentFileType === 'word' && !file.name.endsWith('.docx')) {
                showError('请选择.docx格式的Word文件');
                return;
            }

            if (currentFileType === 'excel' && !file.name.endsWith('.xlsx')) {
                showError('请选择.xlsx格式的Excel文件');
                return;
            }

            resetUI();
            uploadFile(file);
        }

        function uploadFile(file) {
            const formData = new FormData();
            formData.append('file', file);
            currentFileName = file.name;

            loading.style.display = 'block';

            fetch('/upload', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.error) {
                    throw new Error(data.error);
                }
                
                if (currentFileType === 'word') {
                    // Word处理逻辑
                    preview.innerHTML = data.content;
                    
                    // 显示下载按钮和相关信息
                    if (data.markdown && data.markdown.path) {
                        downloadUrl = data.markdown.path;
                        downloadWordBtn.style.display = 'block';
                    }
                } else if (currentFileType === 'excel') {
                    // Excel处理逻辑
                    showSuccess('Excel文件上传成功，点击生成Prompt按钮开始处理');
                    processExcelBtn.style.display = 'block';
                    currentFileName = data.filename;
                    tempFilePath = data.tempPath;
                }
            })
            .catch(err => {
                showError(err.message || '处理过程中发生错误');
            })
            .finally(() => {
                loading.style.display = 'none';
            });
        }

        function handleDownloadWord() {
            if (downloadUrl) {
                window.location.href = downloadUrl;
            }
        }

        function handleDownloadExcel() {
            if (downloadUrl) {
                window.location.href = downloadUrl;
            }
        }

        function handleProcessExcel() {
            if (!currentFileName) {
                showError('请先上传Excel文件');
                return;
            }
            
            loading.style.display = 'block';
            error.style.display = 'none';
            success.style.display = 'none';
            downloadExcelBtn.style.display = 'none';
            
            // 发送请求处理Excel文件
            fetch('/process-excel', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    filename: currentFileName,
                    tempPath: tempFilePath
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.error) {
                    throw new Error(data.error);
                }
                
                showSuccess(data.message || 'Excel文件处理成功，可下载结果文件');
                
                // 显示下载按钮和相关信息
                if (data.download_path) {
                    downloadUrl = data.download_path;
                    downloadExcelBtn.style.display = 'block';
                }
            })
            .catch(err => {
                showError(err.message || '处理Excel文件过程中发生错误');
            })
            .finally(() => {
                loading.style.display = 'none';
            });
        }

        function handleProcessReview() {
            const wordFile = document.getElementById('wordFileInput').files[0];
            const excelFile = document.getElementById('excelFileInput').files[0];
            const modelType = document.getElementById('modelType').value;
            
            if (!wordFile || !excelFile) {
                showError('请先上传Word和Excel文件');
                return;
            }
            
            // 显示加载状态
            loading.style.display = 'block';
            error.style.display = 'none';
            success.style.display = 'none';
            processReviewBtn.disabled = true;
            
            // 创建FormData对象
            const formData = new FormData();
            formData.append('wordFile', wordFile);
            formData.append('excelFile', excelFile);
            formData.append('modelType', modelType);
            
            // 调用服务器端的审核API
            fetch('/process-review', {
                method: 'POST',
                body: formData
            })
            .then(response => {
                if (!response.ok) {
                    return response.json().then(data => {
                        throw new Error(data.error || '文档审核失败');
                    });
                }
                return response.json();
            })
            .then(data => {
                if (data.taskId) {
                    // 任务已开始，显示进度条
                    loading.style.display = 'none';
                    progressContainer.style.display = 'block';
                    showSuccess('审核任务已开始，请等待完成');
                    
                    // 存储任务ID并开始轮询进度
                    currentTaskId = data.taskId;
                    startProgressPolling(currentTaskId);
                } else {
                    showError('启动审核任务失败，服务器未返回任务ID');
                    processReviewBtn.disabled = false;
                }
            })
            .catch(error => {
                loading.style.display = 'none';
                showError(error.message);
                processReviewBtn.disabled = false;
            });
        }
        
        // 开始轮询进度
        function startProgressPolling(taskId) {
            // 立即查询一次进度
            checkProgress(taskId);
            
            // 设置定时器，每2秒查询一次进度
            progressInterval = setInterval(() => {
                checkProgress(taskId);
            }, 2000);
        }
        
        // 检查进度
        function checkProgress(taskId) {
            fetch(`/review-progress/${taskId}`)
                .then(response => response.json())
                .then(data => {
                    // 更新进度条
                    const percent = data.total > 0 ? Math.round((data.completed / data.total) * 100) : 0;
                    progressBar.style.width = `${percent}%`;
                    progressText.textContent = `已完成: ${data.completed}/${data.total} (${percent}%)`;
                    
                    // 更新日志文本框
                    updateLogArea(data.logs || []);
                    
                    // 检查任务是否完成
                    if (data.status === 'completed') {
                        // 停止轮询
                        clearInterval(progressInterval);
                        progressInterval = null;
                        
                        // 显示成功消息和下载按钮
                        showSuccess(data.message || '文档审核完成');
                        downloadUrl = data.downloadPath;
                        downloadExcelBtn.style.display = 'inline-block';
                        processReviewBtn.disabled = false;
                    } else if (data.status === 'failed') {
                        // 停止轮询
                        clearInterval(progressInterval);
                        progressInterval = null;
                        
                        // 显示错误消息
                        showError(`审核任务失败: ${data.error || '未知错误'}`);
                        processReviewBtn.disabled = false;
                    }
                })
                .catch(err => {
                    console.error('检查进度出错:', err);
                });
        }
        
        // 更新日志区域
        function updateLogArea(logs) {
            if (!logs || !Array.isArray(logs) || logs.length === 0) return;
            
            const logArea = document.getElementById('logArea');
            
            // 清空现有内容，如果是第一次收到日志
            if (logArea.textContent === '等待日志信息...') {
                logArea.innerHTML = '';
            }
            
            // 获取已显示的日志行数
            const displayedLogs = logArea.innerHTML.split('<br>').filter(l => l.trim().length > 0);
            
            // 仅添加新的日志行
            const newLogs = logs.slice(displayedLogs.length);
            
            if (newLogs.length > 0) {
                // 应用日志级别的颜色
                const coloredLogs = newLogs.map(log => {
                    // 添加颜色类
                    if (log.includes('[INFO]')) {
                        return `<span class="log-info">${log}</span>`;
                    } else if (log.includes('[ERROR]')) {
                        return `<span class="log-error">${log}</span>`;
                    } else if (log.includes('[WARN]')) {
                        return `<span class="log-warn">${log}</span>`;
                    } else if (log.includes('[SUCCESS]')) {
                        return `<span class="log-success">${log}</span>`;
                    }
                    return log;
                });
                
                // 添加新日志
                if (logArea.innerHTML.length > 0) {
                    logArea.innerHTML += '<br>' + coloredLogs.join('<br>');
                } else {
                    logArea.innerHTML = coloredLogs.join('<br>');
                }
                
                // 滚动到底部
                logArea.scrollTop = logArea.scrollHeight;
            }
        }

        function showError(message) {
            error.textContent = message;
            error.style.display = 'block';
            loading.style.display = 'none';
        }

        function showSuccess(message) {
            success.textContent = message;
            success.style.display = 'block';
        }
        
        // 初始化界面
        initializeUI();
    </script>
</body>
</html>
